<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/admin/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="/static/admin/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="/static/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/static/admin/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/admin/css/animate.min.css" rel="stylesheet">
    <link href="/static/admin/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="/static/admin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox-title">
        <h5>订单列表</h5>
    </div>
    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-content">

            <!--搜索框开始-->
            <form id='commentForm' role="form" method="post" class="form-inline">
                <div class="content clearfix m-b">
                    <div class="form-group">
                        <button class="btn btn-outline btn-primary" type="button" id="all_order">所有订单</button>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-outline btn-primary" type="button" id="new_order">新的订单</button>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-outline btn-primary" type="button" id="my_order">我的订单</button>
                    </div>
                    <div class="form-group pull-right">
                        <a href="./outExcel">
                            <button class="btn btn-primary" type="button">导出Excel</button>
                        </a>
                    </div>

                    <div class="hr-line-dashed"></div>

                    <div class="form-group">
                        <label class="control-label">订单状态：</label>

                        <div class="input-group">
                            <select id="status" name="status" class="selectpicker show-tick form-control"
                                    data-live-search="false">
                                <option value="0">所有的</option>
                                <option value="1">进行中</option>
                                <option value="2">已下单</option>
                                <option value="3">已完成</option>
                                <option value="4">已撤销</option>
                                <option value="5">待接单</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>订单编号：</label>
                        <input type="text" class="form-control" id="number" name="number">
                    </div>
                    <div class="form-group">
                        <label>公众号：</label>
                        <input type="text" class="form-control" id="account" name="account">
                    </div>
                    <div class="form-group">
                        <label>联系人：</label>
                        <input type="text" class="form-control" id="contact" name="contact">
                    </div>
                    <div class="form-group">
                        <label>渠道：</label>
                        <input type="text" class="form-control" id="user_name" name="user_name">
                    </div>
                    <div class="form-group">
                        <label>订单时间：</label>

                        <div class="input-group date form_date" data-date="" data-date-format="yyyy-mm-dd"
                             data-link-field="start_date" data-link-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            <input type="hidden" id="start_date" name="start_date"/>
                        </div>
                        -
                        <div class="input-group date form_date" data-date="" data-date-format="yyyy-mm-dd"
                             data-link-field="end_date" data-link-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            <input type="hidden" id="end_date" name="end_date"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" type="button" style="margin-top:5px" id="search"><strong>搜
                            索</strong>
                        </button>
                    </div>
                </div>
            </form>
            <!--搜索框结束-->

            <div class="hr-line-dashed"></div>

            <div class="example-wrap">
                <div class="example">
                    <table id="cusTable" data-height="500">
                        <thead>
                        <th data-field="number">订单编号</th>
                        <th data-field="source">订单来源</th>
                        <th data-field="content">订单内容</th>
                        <th data-field="account">账号</th>
                        <th data-field="position">位置</th>
                        <th data-field="datepicker">时间</th>
                        <th data-field="contact">联系人</th>
                        <th data-field="user_name">渠道专员</th>
                        <th data-field="serv_name">服务支持</th>
                        <th data-field="price">订单价</th>
                        <th data-field="deal_price">结算价</th>
                        <th data-field="operate">操作</th>
                        </thead>
                    </table>
                </div>
            </div>
            <!-- End Example Pagination -->
        </div>
    </div>
</div>
<!-- End Panel Other -->
</div>
<script type="text/javascript">
    zNodes = '';
</script>
<script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/admin/js/bootstrap-select.min.js"></script>
<script src="/static/admin/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/static/admin/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/admin/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="/static/admin/js/content.min.js?v=1.0.0"></script>
<script src="/static/admin/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/admin/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/static/admin/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/admin/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script src="/static/admin/js/plugins/layer/laydate/laydate.js"></script>
<script src="/static/admin/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="/static/admin/js/plugins/layer/layer.min.js"></script>
<link rel="stylesheet" href="/static/admin/js/plugins/zTree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/static/admin/js/plugins/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/static/admin/js/plugins/zTree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="/static/admin/js/plugins/zTree/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript">
    function initTable() {
        //先销毁表格
        $('#cusTable').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#cusTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "./index", //获取数据的地址
            striped: true,  //表格显示条纹
            pagination: true, //启动分页
            pageSize: 10,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [5, 10, 15, 20, 25],  //记录数可选列表
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    searchStatus: $('#status').val(),
                    searchNumber: $('#number').val(),
                    searchAccount: $('#account').val(),
                    searchContact: $('#contact').val(),
                    searchUserName: $('#user_name').val(),
                    searchStartDate: $('#start_date').val(),
                    searchEndDate: $('#end_date').val()
                };
                return param;
            },
            onLoadSuccess: function () {  //加载成功时执行
                layer.msg("加载成功", {time: 1000});
            },
            onLoadError: function () {  //加载失败时执行
                layer.msg("加载数据失败");
            }
        });
    }

    $('.form_date').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });

    $(document).ready(function () {
        //调用函数，初始化表格
        initTable();

        //当点击查询按钮的时候执行
        $("#search").bind("click", initTable);
        $("#all_order").bind("click", allOrder);
        $("#new_order").bind("click", newOrder);
        $("#my_order").bind("click", myOrder);

    });

    function allOrder() {
        $('#status').val('0');
        $('#number').val('');
        $('#account').val('');
        $('#contact').val('');
        $('#user_name').val('');
        $('#start_date').val('');
        $('#end_date').val('');
        initTable();
    }

    function newOrder() {
        $('#status').val('5');
        $('#number').val('');
        $('#account').val('');
        $('#contact').val('');
        $('#user_name').val('');
        $('#start_date').val('');
        $('#end_date').val('');
        initTable();
    }

    function myOrder() {
        $('#status').val('0');
        $('#number').val('');
        $('#account').val('');
        $('#contact').val('');
        $('#user_name').val('{$Think.session.username}');
        $('#start_date').val('');
        $('#end_date').val('');
        initTable();
    }

    function orderTake(id) {
        layer.confirm('确认此操作?', {icon: 3, title: '提示'}, function (index) {
            //do something
            $.getJSON('./orderTake', {'id': id}, function (res) {
                if (res.code == 1) {
                    layer.alert('操作成功', function () {
                        initTable();
                    });
                } else {
                    layer.alert('操作失败');
                }
            });

            layer.close(index);
        })
    }

    function orderDel(id) {
        layer.confirm('确认撤销此订单?', {icon: 3, title: '提示'}, function (index) {
            //do something
            $.getJSON('./orderDel', {'id': id}, function (res) {
                if (res.code == 1) {
                    layer.alert('撤销成功', function () {
                        initTable();
                    });
                } else {
                    layer.alert('撤销失败');
                }
            });

            layer.close(index);
        })
    }
</script>
</body>
</html>
